<template>
  <div>
    <FirstScreen
      :FirstImg="FirstImg"
      :title="title"
      :content="content"
    ></FirstScreen>
    <div class="prize">
      <div>
        <div class="menu">
          <h3 class="title">获奖成果</h3>
          <ul class="menu_box">
            <li
              class="one_level"
              :class="index_item === key ? 'active' : ''"
              v-for="(item, key) in menuList"
              :key="item.id"
            >
              <div class="one">
                <div>{{ item.title }}</div>
                <div @click="expand(key)">
                  {{ isexpand[key].open ? "-" : "+" }}
                </div>
              </div>
              <ul class="two_box" ref="two_height">
                <li
                  class="two_level"
                  v-for="i in item.two_List"
                  :key="i.id"
                  @click="select(item.id + '' + i.id)"
                >
                  {{ i.title }}
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <div class="content">
        <div class="title">{{ nowLevel }}</div>
        <div class="detial">
          <div class="words">{{ nowContent }}</div>
          <ul class="picture">
            <li v-for="(item, index) in nowPicture" :key="index">
              <img :src="item.url" alt="" />
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FirstScreen from "@/components/common/FirstScreen";
export default {
  components: {
    FirstScreen,
  },
  name: "Awards",
  data() {
    return {
      index_item: 0,
      menuList: [
        {
          title: "国家级",
          id: 0,
          two_List: [
            {
              title: "大师科技部",
              id: 0,
              content: "卡数据库达本赛季的把控技术部的空间",
              picture: [
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
                
              ],
            },
            {
              title: "大师科技部",
              id: 1,
              content:
                "卡数据库达本赛季的把控技术卡数据库达本赛季的把控技术部的空间部的空间",
              picture: [
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
              ],
            },
            {
              title: "大师科技部",
              id: 2,
              content: "卡数据库达本赛季的把控技术部的空间",
              picture: [
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
              ],
            },
          ],
        },
        {
          title: "省级",
          id: 1,
          two_List: [
            {
              title: "大师科技部",
              id: 0,
              content: "卡数据库达本赛季的把控技术部的空间",
              picture: [
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
              ],
            },
            {
              title: "大师科技部",
              id: 1,
              content: "卡数据库达本赛季的把控技术部的空间",
              picture: [
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
              ],
            },
          ],
        },
        {
          title: "校级",
          id: 2,
          two_List: [
            {
              title: "大师科技部",
              id: 0,
              content: "卡数据库达本赛季的把控技术部的空间",
              picture: [
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
              ],
            },
            {
              title: "大师科技部",
              id: 1,
              content: "卡数据库达本赛季的把控技术部的空间",
              picture: [
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
              ],
            },
            {
              title: "大师科技部",
              id: 2,
              content:
                "卡数据库达本赛季的把控技卡数据库达本赛季的把控技术部的空间术部的空间",
              picture: [
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
              ],
            },
            {
              title: "大师科技部",
              id: 3,
              content: "卡数据库达本赛季的把控技术部的空间",
              picture: [
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
                {
                  url:
                    "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
                },
              ],
            },
          ],
        },
      ],
      FirstImg:
        "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
      ImgList: [
        {
          url:
            "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
        },
        {
          url:
            "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
        },
        {
          url:
            "https://img20.360buyimg.com/da/jfs/t3157/165/6117849901/102894/88bf53b8/589d67b6Ne8986a9e.jpg",
        },
      ],
      title: "所获奖项",
      content:
        "卡拉受不了的海拔手机端比较好刷拔手机端比较好刷卡机的空间内部啥的客户编号萨贝达卡拉受不了的海拔手机端比较好刷卡机的空间内部",
      isexpand: [
        {
          open: true,
        },
        {
          open: false,
        },
        {
          open: false,
        },
      ],
      show: true,
      i_height: [1, 2, 3],
      nowContent: "",
      nowPicture: [],
      nowLevel: "",
    };
  },
  created() {
    this.nowContent = this.menuList[0].two_List[0].content;
    this.nowPicture = this.menuList[0].two_List[0].picture;
    this.nowLevel = this.menuList[0].title;
    console.log(this.i_height);
  },
  mounted: function () {
    for (let i = 0; i < this.menuList.length; i++) {
      this.i_height[i] = this.$refs.two_height[i].clientHeight;
      // console.log(this.$refs.two_height[i].style.height);
    }
    this.menuList.forEach((e, index) => {
      this.$refs.two_height[index].style.height = 0;
      this.$refs.two_height[0].style.height = "";
      this.$refs.two_height[0].style.height =
        this.$refs.two_height[0].clientHeight + "px";
    });
    console.log(this.i_height);
  },
  methods: {
    expand(e) {
      // console.log(this.$refs.two_height[e].clientHeight);
      this.isexpand[e].open = !this.isexpand[e].open;
      if (this.isexpand[e].open) {
        this.$refs.two_height[e].style.height = this.i_height[e] + "px";
        // let aa=this.$refs.two_height[e].clientHeight+'px';
        // this.$refs.two_height[e].style.height = 0+'px';
        // console.log(this.$refs.two_height[e].clientHeight);
        // this.$refs.two_height[e].style.height=this.$refs.two_height[e].clientHeight+'px'
      } else {
        // this.$refs.two_height[e].clientHeight=0+'px';
        this.$refs.two_height[e].style.height = 0 + "px";
        console.log(this.$refs.two_height[e].clientHeight);
      }
      // this.show = !this.show;
      // console.log(e);
      // :style="{ display: isexpand ? 'block' : 'none' }"
    },
    select(e) {
      console.log(e);
      switch (e) {
        case "00":
          this.nowContent = this.menuList[0].two_List[0].content;
          this.nowPicture = this.menuList[0].two_List[0].picture;
          this.nowLevel = this.menuList[0].title;
          this.index_item=0;
          break;
        case "01":
          this.nowContent = this.menuList[0].two_List[1].content;
          this.nowPicture = this.menuList[0].two_List[1].picture;
          this.nowLevel = this.menuList[0].title;
          this.index_item=0;
          break;
        case "02":
          this.nowContent = this.menuList[0].two_List[2].content;
          this.nowPicture = this.menuList[0].two_List[2].picture;
          this.nowLevel = this.menuList[0].title;
          this.index_item=0;
          break;
        case "10":
          this.nowContent = this.menuList[1].two_List[0].content;
          this.nowPicture = this.menuList[1].two_List[0].picture;
          this.nowLevel = this.menuList[1].title;
          this.index_item=1;
          break;
        case "11":
          this.nowContent = this.menuList[1].two_List[1].content;
          this.nowPicture = this.menuList[1].two_List[1].picture;
          this.nowLevel = this.menuList[1].title;
          this.index_item=1;
          break;
        case "20":
          this.nowContent = this.menuList[2].two_List[0].content;
          this.nowPicture = this.menuList[2].two_List[0].picture;
          this.nowLevel = this.menuList[2].title;
          this.index_item=2;
          break;
        case "21":
          this.nowContent = this.menuList[2].two_List[1].content;
          this.nowPicture = this.menuList[2].two_List[1].picture;
          this.nowLevel = this.menuList[2].title;
          this.index_item=2;
          break;
        case "22":
          this.nowContent = this.menuList[2].two_List[2].content;
          this.nowPicture = this.menuList[2].two_List[2].picture;
          this.nowLevel = this.menuList[2].title;
          this.index_item=2;
          break;
        case "23":
          this.nowContent = this.menuList[2].two_List[3].content;
          this.nowPicture = this.menuList[2].two_List[3].picture;
          this.nowLevel = this.menuList[2].title;
          this.index_item=2;
          break;

        default:
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
ul,
li {
  list-style: none;
}
.prize {
  width: 1200px;
  margin: 50px auto;
  display: flex;
  justify-content: space-between;
  .menu {
    width: 250px;
    border-left: 20px solid #5c307d;
    background: #5c307d;
    .title {
      height: 50px;
      font-size: 25px;
      margin: 0 0 20px 25px;
      line-height: 50px;
      color: #fff;
    }
    .menu_box {
      padding-top: 25px;
      width: 100%;
      background: #fff;
      :last-child {
        border-bottom: solid #e3e3e3 1px;
      }
      .one_level {
        width: 100%;
        border-top: solid #e3e3e3 1px;
        .one {
          display: flex;
          height: 65px;
          z-index: 1000;
          background-color: #fff;
          :nth-child(1) {
            width: 190px;
            height: 100%;
            padding-left: 30px;
            line-height: 60px;
            border-right: solid #e3e3e3 1px;
          }
          :nth-child(2) {
            width: 30px;
            height: 100%;
            font-size: 25px;
            text-align: center;
            line-height: 65px;
            font-weight: bold;
          }
          :nth-child(1):hover {
            cursor: pointer;
            color: #5c307d;
          }
          :nth-child(2):hover {
            cursor: pointer;
            background: #e3e3e3;
          }
        }
        .two_box {
          // height: 0;
          transition: height 0.4s ease-in-out;
          overflow: hidden;
        }
        .two_level {
          height: 50px;
          padding: 0 35px;
          font-size: 14px;
          line-height: 50px;
          color: #000;
          background: #f7f7f7;
          border-top: solid #e3e3e3 1px;
        }
        .two_level:hover {
          background: #e3e3e3;
          cursor: pointer;
        }
      }
      .active {
        color: #5c307d;
      }
    }
  }
  .content {
    margin: 50px 0;
    width: 880px;
    right: 0;
    top: 80px;
    .title {
      width: 100px;
      height: 50px;
      font-size: 30px;
      color: #5c307d;
    }
    .detial {
      border-top: solid #e3e3e3 1px;
      .words {
        width: 100%;
        margin: 30px auto;
      }
      .picture {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        img {
          width: 400px;
          height: 200px;
          margin-top: 20px;
        }
      }
    }
  }
}

.aa-move {
  transition: all 3s;
}

.aa-leave-active {
  position: absolute;
}

.expands-move {
  transition: all 3s;
}

.expands-leave-active {
  position: absolute;
}

.two-expands {
  transition: max-height ease-in 3s;
}

.two-expands-enter,
.two-expands-leave-to {
  transform: max-height(2000px);
}
</style>